<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Strobe Media Playback</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
	<script type="text/javascript">  		
    		
    	// Create a StrobeMediaPlayback configuration 
		var parameters =
			{	src: "http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv"   			
   			,	autoPlay: true
			,	controlBarAutoHide: false
			,   javascriptCallbackFunction: "onJavaScriptBridgeCreated"
			};
    		
		// Embed the player SWF:    		
		swfobject.embedSWF
			( "StrobeMediaPlayback.swf"
			, "strobeMediaPlayback"
			, 640
			, 480
			, "10.1.0"
			, {}
			, parameters
			, { allowFullScreen: "true"}
			, { name: "strobeMediaPlayback" }
			);
			
		function onCurrentTimeChange(time, playerId)
		{
			document.getElementById("currentTime").innerHTML = time;		
		}
		
		function onDurationChange(time, playerId)
		{
			document.getElementById("duration").innerHTML = time;	
		}		
		var player = null;
		function onJavaScriptBridgeCreated(playerId)
		{
			if (player == null) {
				player = document.getElementById(playerId);
				
				// Add event listeners that will update the 
				player.addEventListener("currentTimeChange", "onCurrentTimeChange");
				player.addEventListener("durationChange", "onDurationChange");
				
				// Pause/Resume the playback when we click the Play/Pause link
				document.getElementById("play-pause").onclick = function(){
					var state = player.getState();
					if (state == "ready" || state == "paused") {
						player.play2();
					}
					else 
						if (state == "playing") {
							player.pause();
						}
					return false;
				};
			}
		}
    </script>  	
  </head>
  <body>
	<div>
		<div>
			<span id="currentTime" /> ... </span> : <span id="duration" /> ... </span>
		</div>   
		<a href="#" id="play-pause">Play/Pause</div>  
	</div>
	<div id="strobeMediaPlayback">
      <p>Alternative content</p>
    </div>
  </body>
</html>